<template>
	<div class="cart">
		<Header title="购物车" :edit="true"/>
		<cartDetail v-if="isShow" :changeShow="changeShow"/>
		<Empty v-else/>
		<Footer/>
	</div>
</template>

<script setup>
	import { useStore } from 'vuex';
	import Header from '../../components/Header.vue';
	import Empty from '../../components/Empty.vue'
	import cartDetail from './components/cartDetail.vue'
	import { onMounted, ref } from 'vue';
	const store = useStore()
	
	const isShow = ref(true)
	
	const init = () => {
		if(store.state.cartList.length === 0 ) {
			isShow.value = false
		}
	}
	
	onMounted(()=>{
		init()
	})
	
	const changeShow = ()=>{
		isShow.value = false
	}
</script>

<style lang="less" scoped>
	.cart {
		display: flex;
		flex-flow: column;
		height: 100%;
		// font-size: 12px;
		.content {
			flex: 1;
			overflow-y: auto;
			justify-content: center;
			align-items: center;
		}
	}
</style>